<!--
 * @Description: 事件
 * @Author: rendc
 * @Date: 2025-11-03 11:20:30
 * @LastEditors: rendc
 * @LastEditTime: 2025-11-03 15:34:26
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>事件</title>
  <style>
    .light{
      width: 50px;
      height: 50px;
      background-color: greenyellow;
      margin: 60px;
      border-radius: 50%;
    }
    .light2{
      background-color: rgb(8, 8, 8);
    }
  </style>
</head>
<body>
  <div id="light" class="light"></div>
  <!-- 绑定事件  -->
  <button id="btn3" onclick="clickRed()">红灯</button>
  <button id="greenLightBtn">绿灯</button>
  <button id="yellowLightBtn">黄灯</button>
  <button id="btn1" onclick="clickFun()">按钮1-单击事件</button>
  <button id="btn2">按钮2-单击事件</button>
  <button id="btn4" onclick="console.log('hello')">按钮4-单击事件</button>
  <br>
  <div id="light2" class="light light2"></div>
  <button id="lightBtn" onclick="clickLightBtn()">开灯</button>
  <script>
    // 默认状态 
    //  灯是关着的
    //  按钮文字是：开灯
    // 点击按钮后
    //  灯是开着的 改变颜色
    //  按钮文字是：关灯
    // 再次点击按钮 切换状态
    function clickLightBtn(){
      var light2 = document.getElementById("light2");
      var lightBtn =document.getElementById("lightBtn");
      var lightBtnText = lightBtn.innerHTML;
      // 切换状态
      // if(lightBtnText == "开灯"){
      //   // 此时灯是开的
      //   lightBtn.innerText="关灯";
      // light2.style.backgroundColor = "hotpink";
      // }else{
      //   // 此时灯是关的
      //   lightBtn.innerText="开灯";
      //   light2.style.backgroundColor = "black";
      // }
      console.log('🤡 CC - clickLightBtn - light2.style.backgroundColor:', light2.style.backgroundColor);
      console.log('🤡 CC - clickLightBtn - light2.style:', light2.style);
      // 通过灯的颜色去判断状态
      if(light2.style.backgroundColor == "black"){
        console.log('🤡 CC - clickLightBtn - if:',);
        // 此时灯是开的
        lightBtn.innerText="关灯";
        light2.style.backgroundColor = "hotpink";
      }else{
        console.log('🤡 CC - clickLightBtn - else:');
        // 此时灯是关的
        lightBtn.innerText="开灯";
        light2.style.backgroundColor = "black";
      }
      // else{
      //   console.log("灯坏了");
      // }
    }

    // 声明 clickRed 事件 
    function clickRed(){
      // 点击红灯按钮触发这个事件
      // console.log('🤡 CC - clickRed - clickRed');
      // 点击按钮 修改 灯 的颜色
      // 获取 light 元素
      var light = document.getElementById("light");
      // console.log('🤡 CC - clickRed - light:', light);
      // 修改 灯 的颜色
      light.style.backgroundColor = "red";
    }
    // 通过html绑定事件
    function clickFun(){
      console.log('🤡 CC - clickFun - 按钮1-单击事件被触发');
    }
    // 通过js代码绑定事件
    // 1. 找到按钮
    var btn2 = document.getElementById("btn2");
    // 2. 绑定事件
    btn2.onclick = function(){
      console.log('🤡 CC - clickFun - 按钮2-单击事件被触发');
    }
    // 绑定绿灯的事件
    // 找到绿灯按钮
    var greenLightBtn = document.getElementById("greenLightBtn");
    // 绑定事件
    // console.log('🤡 CC - greenLightBtn:', greenLightBtn);
    greenLightBtn.onclick = function(){
      // console.log('🤡 CC - greenLightBtn:');
      // 点击按钮 修改 灯 的颜色
      // 获取 light 元素
      var light = document.getElementById("light");
      // console.log('🤡 CC - clickRed - light:', light);
      // 修改 灯 的颜色
      light.style.backgroundColor = "greenyellow";
    }
    // 绑定黄灯的事件
    // 找到黄灯按钮
    var yellowLightBtn = document.getElementById("yellowLightBtn");
    // 绑定事件 - 事件监听
    yellowLightBtn.addEventListener("click",function(){
      // console.log('🤡 CC - addEventListener');
      // 点击按钮 修改 灯 的颜色
      // 获取 light 元素
      var light = document.getElementById("light");
      // console.log('🤡 CC - clickRed - light:', light);
      // 修改 灯 的颜色
      light.style.backgroundColor = "orange";
    });
  </script>
</body>
</html>